<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../vue.js"></script>
		<!-- https://cn.vuejs.org/v2/guide/class-and-style.html -->
		<title>Class 与 Style 绑定 -- 绑定内联样式</title>
	</head>
	<body>
		<div id="vm1">
			{{message}}
			<!-- 
			
			数组语法
			v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
			
			<div v-bind:style="[baseStyles, overridingStyles]"></div>
			
			
			多重值
			2.3.0+
			
			从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
			
			<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
			这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
			 
			  
			 <!--
			 	第一个color是对象的属性，第二个color是变量
				
				注意： :style 
			  -->
		
			<div v-on:click="click1()" :style="{color: color, fontSize: size, background:isGreen ? 'green':''}">
				绑定内联样式
			</div>

		</div>
		<script>
			var data = {
				message: '绑定内联样式',
				seen: true, // false
				url: 'https://cn.vuejs.org/v2/guide/class-and-style.html',
				isActive:true,
				isWhite:true,
				isGreen:true,
				color:'#ffffff',
				size:'50px',
			
			}
			var vm1 = new Vue({
				el: '#vm1',
				data: data,
				methods: {
					click1: function(){
						console.log('click 1 事件')
					},
					click2:function(){
						console.log('click 2 事件')
					},
				}
			})
		</script>

		<style type="text/css">
			.test {
				font-size: 50px;
			}

			.white {
				color: white;
			}
			
			.green {
				color: green;
			}

			.active {
				background-color: blue;
				/* font-size: 50px; //没有单位不生效 */
			}
		</style>

	</body>
</html>
